<template>
	<view>
		<view class="bg-white padding-sm radius">
			<view v-if="name != ''" class="text-lg text-black text-bold margin-bottom-xs">
				{{ name }}
			</view>
			<view class="grid text-center" :class="'col-' + colNum">
				<view class="menu-item padding-xs" v-for="(item,index) in menus" :key="index" @tap="onclick(item)">
					<view class="icon-box flex align-center justify-center">
						<!-- <text class="iconfont" :class="'icon-' + item.icon" style="font-size: 90rpx;" ></text> -->
						<image :src="item.icon" class="iconfont"></image>
					</view>
					<view class="text-df text-grey">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "z-menus",
		data() {
			return {
				menus: [],
				colNum: 4,
				name: ''
			};
		},
		props: {
			col: {
				type: Number,
				default: 4
			},
			data: {
				type: Array,
				default: ()=>{
					return [{
						id: 0,
						name: '相机配置',
						icon: 'camerafill',
						color: ''
					},
					{
						id: 1,
						name: '相机配置',
						icon: 'camerafill',
						color: ''
					},
					{
						id: 2,
						name: '相机配置',
						icon: 'camerafill',
						color: ''
					},
					{
						id: 3,
						name: '相机配置',
						icon: 'camerafill',
						color: ''
					}
				]
				}
			},
			title: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.menus = this.data;
			this.colNum = this.col;
			this.name = this.title;
		},
		methods:{
			onclick(item){
				this.$emit('onClick',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-item {
		.icon-box {
			width: 112rpx;
			height: 112rpx;
			margin: 0 auto;
			font-size: 78rpx;
			border-radius: 50%;
			.iconfont{
				width: 85%;height: 85%;
			}
		}
	}
</style>
